<template>
	<view>
		<u-navbar title="我的闲置" @leftClick="leftClick" :autoBack="true" :safeAreaInsetTop="true" :placeholder="true"
			:fixed="true">
		</u-navbar>
		<view class="content">
			<u-sticky bgColor="#fff">
				<u-tabs :list="list1" :scrollable="false" @click="tabClick" lineWidth="30" lineColor="#f56c6c"
					:activeStyle="{
						color: '#303133',
						fontWeight: 'bold',
						transform: 'scale(1.05)'
					}" :inactiveStyle="{
						color: '#606266',
						transform: 'scale(1)'
					}" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;"></u-tabs>
			</u-sticky>

		</view>
		<view class="add-shop-box" @click.stop="goToAddShop">
			<u-icon name="server-man" size="28" color="#FFF"></u-icon>
		</view>

		<scroll-view style="height: 90vh;" scroll-y="true" refresher-enabled="true" :refresher-triggered="triggered"
			@scrolltolower="scrolltolower" :refresher-threshold="50" @refresherpulling="onPulling"
			@refresherrefresh="onRefresh" @refresherrestore="onRestore" @refresherabort="onAbort">

			<view class="list" v-if="tabIndex == 0">
				<view class="list-item" v-for="(item,index) in oneList" :key="index">
					<view class="list-item-head">
						<view class="list-item-head-left">
							订单号 {{item.shop_order}}
						</view>
						<view class="list-item-head-right">
							待接单
						</view>
					</view>
					<view class="list-item-content">
						<view class="list-item-content-item">
							<view class="list-item-content-left">
								{{item.shopIntroduce}}
							</view>
							<view class="list-item-content-right">
								×{{item.buy_shop_number}}
							</view>
						</view>

					</view>
					<view class="list-item-user">
						<view class="list-item-user-i">
							用户姓名:{{item.userName}}
						</view>
						<view class="list-item-user-i">
							用户电话:{{item.userPhone}}
						</view>
						<view class="list-item-user-i">
							用户地址:{{item.userAddress}}
						</view>
					</view>
					<view class="list-item-bottom">
						<view class="list-item-bottom-left">
							共计<text class="list-item-bottom-left-price">￥{{item.sumPrice}}</text>元
						</view>
						<view class="list-item-bottom-right">
							<view :style="{marginRight: '10px'}">
								<u-button @click="shopGoToChat(item)"  size="mini" text="私信"  color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></u-button>
							</view>
							<u-button  @click="businessConfirm(item.id)" text="确认接单" type="error" size="mini"></u-button>
						</view>
					</view>
				</view>
			</view>

			<view class="list" v-if="tabIndex == 1">
				<view class="list-item" v-for="(item,index) in twoList" :key="index">
					<view class="list-item-head">
						<view class="list-item-head-left">
							订单号 {{item.shop_order}}
						</view>
						<view class="list-item-head-right">
							派送中
						</view>
					</view>
					<view class="list-item-content">
						<view class="list-item-content-item">
							<view class="list-item-content-left">
								{{item.shopIntroduce}}
							</view>
							<view class="list-item-content-right">
								×{{item.buy_shop_number}}
							</view>
						</view>
					</view>
					<view class="list-item-user">
						<view class="list-item-user-i">
							用户姓名:{{item.userName}}
						</view>
						<view class="list-item-user-i">
							用户电话:{{item.userPhone}}
						</view>
						<view class="list-item-user-i">
							用户地址:{{item.userAddress}}
						</view>
					</view>
					<view class="list-item-bottom">
						<view class="list-item-bottom-left">
							共计<text class="list-item-bottom-left-price">￥{{item.sumPrice}}</text>元
						</view>
						<view class="list-item-bottom-right">
							<view :style="{marginRight: '10px'}">
								<u-button @click="shopGoToChat(item)"  size="mini" text="私信"  color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))"></u-button>
							</view>
							<u-button  @click="businessConfirmPost(item.id)" text="确认送达" type="error" size="mini"></u-button>
						</view>
					</view>
				</view>
			</view>


			<view class="list" v-if="tabIndex == 2">
				<view class="list-item" v-for="(item,index) in threeList" :key="index">
					<view class="list-item-head">
						<view class="list-item-head-left">
							订单号 {{item.shop_order}}
						</view>
						<view class="list-item-head-right">
							已完成
						</view>
					</view>
					<view class="list-item-content">
						<view class="list-item-content-item">
							<view class="list-item-content-left">
								{{item.shopIntroduce}}
							</view>
							<view class="list-item-content-right">
								×{{item.buy_shop_number}}
							</view>
						</view>


					</view>
					<view class="list-item-user">
						<view class="list-item-user-i">
							用户姓名:{{item.userName}}
						</view>
						<view class="list-item-user-i">
							用户电话:{{item.userPhone}}
						</view>
						<view class="list-item-user-i">
							用户地址:{{item.userAddress}}
						</view>
						<view class="list-item-user-i">
							用户是否确认收货: {{item.userIsSuccess == 0 ? '否' : '是'}}
						</view>
					</view>
					<view class="list-item-bottom">
						<view class="list-item-bottom-left">
							共计<text class="list-item-bottom-left-price">￥{{item.sumPrice}}</text>元
						</view>
					</view>
				</view>
			</view>

			<view class="bottom">
				<u-loadmore :status="status" :icon="true" v-if="isShow" :loadingText="loadingText"
					@loadmore="loadmore" />
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import MescrollBody from "@/uni_modules/mescroll-uni/components/mescroll-body/mescroll-body.vue";
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		data() {
			return {
				list1: [{
					name: '等待接单',
				}, {
					name: '等待发货',
				}, {
					name: '订单历史',
				}],
				tabIndex: 0,
				onePage: 1,
				oneFlag: false,
				oneList: [],
				twoPage: 1,
				twoFlag: false,
				twoList: [],
				threePage: 1,
				threeFlag: false,
				threeList: [],
				triggered: false,
				_freshing: false,
				status: 'loadmore',
				isShow: false,
				code: ''
			};
		},
		methods: {
			shopGoToChat (item) {
				console.log(item)
				let obj = {
					orderNumber: item.shop_order,
					contactMethod: '3',
					publicAccounts:  item.business_accounts,
					consumerAccounts: item.user_accounts,
					accounts: item.pb_accounts,
					methods: '3',
					pb_info: item.avatar
				}
				uni.navigateTo({
					url: '../../chat/message/message?obj=' + JSON.stringify(obj)
				})
				
			},
			// get code
			getCode() {
				wx.login({
					success: (res) => {
						this.code = res.code
					}
				})
			},
			/*
				订阅
			*/
			subscrShop(tplids) {
				uni.requestSubscribeMessage({
					tmplIds: [tplids],
					success: async (res) => {
						if (res[tplids] !== 'accept') return
						let prames = {
							code: this.code,
							template_id: tplids
						}
						const {
							data: res2
						} = await uni.$http.post('/message/addWenXinMessage', prames)
						this.getCode()
			 		if (res2.status !== 200) return uni.showToast({
							icon: 'none',
							title: '订阅失败',
							duration: 2000
						})
					uni.showToast({
						icon: 'none',
						title: '订阅成功',
						duration: 2000
					})
					},
					fail: (res) => {
						console.log(res)
					},
					complete: (res) => {
						
					}
				})
			},
			scrolltolower() {
				if (this.tabIndex === 0) {
					uni.$u.throttle(this.getAwaitOrder, 500)
				}
				if (this.tabIndex === 1) {
					uni.$u.throttle(this.getTwoOrder, 500)
				}
				if (this.tabIndex === 2) {
					uni.$u.throttle(this.getThreeOrder, 500)
				}
			},
			// 后退
			leftClick() {
				uni.navigateBack()
			},
			// 新增商品
			goToAddShop() {
				uni.navigateTo({
					url: '/shop/addShop/addShop'
				})
			},
			/*
				确认送达
			*/
			businessConfirmPost(id) {
				this.subscrShop('5bM_49ov0CVu2QEhL5nQze2goSWx3Jwg08fCvyMyDiE')
				let _this = this
				uni.showModal({
					title: '确认送达',
					content: '您真的把商品送到顾客手中了吗?请确保真实性和诚信，否则我们即按照商家条例来处理(注意，只有用户确认收货，资金才会次日自动打给您，否则7天后资金才会打给您)',
					success: async function(e) {
						if (e.confirm) {
							const {
								data: res
							} = await uni.$http.get(`/shop/businessConfirmPostShop/${id}`)
							if (res.status !== 200) return uni.showToast({
								icon: 'none',
								title: res.message,
								duration: 2000
							})
							uni.showToast({
								icon: 'none',
								title: '确认送达成功',
								duration: 2000
							})
							_this.onPull()
						}
					}
				})
			},
			/*
				确认接单
			*/
			async businessConfirm(id) {
				this.subscrShop('5bM_49ov0CVu2QEhL5nQze2goSWx3Jwg08fCvyMyDiE')
				const {
					data: res
				} = await uni.$http.get(`/shop/BusinessConfirm/${id}`)
				if (res.status !== 200) return uni.showToast({
					icon: 'none',
					title: res.message,
					duration: 2000
				})
				uni.showToast({
					icon: 'none',
					title: '确认接单成功',
					duration: 2000
				})
				this.onPull()
			},
			/*
				tab切换
			*/
			tabClick(e) {
				this.tabIndex = e.index
			},

			/*
							列表到底
						*/
			loadmore() {
				if (this.tabIndex === 0 && this.oneList.length === 0) {
					this.loadmoreText = '没有更多了'
				}
				if (this.tabIndex === 1 && this.twoList.length === 0) {
					this.loadmoreText = '没有更多了'
				}
				if (this.tabIndex === 2 && this.threeList.length === 0) {
					this.loadmoreText = '没有更多了'
				}
			},
			onPulling(e) {
				console.log("onpulling", e);
			},
			onRefresh() {
				if (this._freshing) return;
				this._freshing = true;
				this.isShow = false
				if (this.tabIndex === 0) {
					this.oneList = []
					this.onePage = 1
					this.getAwaitOrder()
					this.triggered = false;
					this._freshing = false;
				}
				if (this.tabIndex === 1) {
					this.twoList = []
					this.twoPage = 1
					this.getTwoOrder()
					this.triggered = false;
					this._freshing = false;
				} else {
					this.threeList = []
					this.threePage = 1
					this.getThreeOrder()
					this.triggered = false;
					this._freshing = false;
				}
				this.isShow = true
			},
			onRestore() {
				this.triggered = 'restore'; // 需要重置
				console.log("onRestore");
			},
			onAbort() {
				console.log("onAbort");
			},
			/*
				获取等待接单的信息
		   */
			async getAwaitOrder() {
				try {
					this.status = 'loading';
					const {
						data: res
					} = await uni.$http.get(`/shop/getBusinessShopOrder/${this.onePage}`)
					if (res.status !== 200) return uni.showToast({
						icon: 'none',
						title: res.message,
						duration: 2000
					})
					if (res.data.length === 0) return this.status = 'nomore';
					this.oneList = [...this.oneList, ...res.data]
					this.onePage++
				} catch (e) {

				}
			},
			/*
							获取已经接单的信息
			*/
			async getTwoOrder() {
				try {
					this.status = 'loading';
					const {
						data: res
					} = await uni.$http.get(`/shop/getBusinessShopOrderProcess/${this.twoPage}`)


					if (res.status !== 200) return uni.showToast({
						icon: 'none',
						title: res.message,
						duration: 2000
					})
					if (res.data.length === 0) return this.status = 'nomore';

					this.twoList = [...this.twoList, ...res.data]
					this.twoPage++
				} catch (e) {

				}
			},
			/*
							获取订单历史的信息
			*/
			async getThreeOrder() {
				try {
					this.status = 'loading';
					const {
						data: res
					} = await uni.$http.get(`/shop/getBusinessShopOrderHistory/${this.threePage}`)
					if (res.status !== 200) return uni.showToast({
						icon: 'none',
						title: res.message,
						duration: 2000
					})
					if (res.data.length === 0) return this.status = 'nomore';
					this.threeList = [...this.threeList, ...res.data]
					this.threePage++
				} catch (e) {

				}
			}
		},
		onLoad() {
			this.getCode()
			this.isShow = false
			this._freshing = false;
			this.getAwaitOrder()
			this.triggered = true;
			this.isShow = true
		}
	}
</script>

<style lang="scss">
	.add-shop-box {
		display: flex;
		z-index: 999;
		height: 40px;
		width: 40px;
		position: fixed;
		right: 3%;
		bottom: 15%;
		background-color: #3C9CFF;
		border-radius: 50%;
		align-items: center;
		justify-content: center;
	}

	.list-item-user {
		padding: 0 5px;

		.list-item-user-i {
			margin-top: 5px;
			color: #303133;
			font-size: 14px;
		}
	}

	.list {
		.list-item {
			padding: 5px 10px;
			background-color: #FFFFFF;
			box-shadow: 1px 1px 2px 1px #FCFCFC;
			border-radius: 5px;
			margin: 5px 0;

			.list-item-head {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 5px;

				.list-item-head-left {
					font-size: 12px;
					color: #C4C6C9;
				}

				.list-item-head-right {
					font-weight: 700;
					font-size: 14px;
				}
			}

			.list-item-content {
				background-color: #F3F4F6;
				padding: 5px 10px;

				.list-item-content-item {
					font-size: 13px;
					color: #909399;
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin: 5px 0;

					.list-item-content-left {
						width: 80%;
					}

					.list-item-content-right {
						width: 10%;
					}
				}
			}

			.list-item-bottom {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin: 10px 0;

				.list-item-bottom-left {
					font-size: 13px;
					color: #909399;

					.list-item-bottom-left-number {
						color: #303133;
						font-size: 14px;
						font-weight: bold;
					}

					.list-item-bottom-left-price {
						font-size: 16px;
						color: #f9ae3d;
					}
				}

				.list-item-bottom-right {
					display: flex;
				}
			}
		}
	}
</style>
